<template>
  <li>
    <h3 v-if="product.productType==1" class="preferred-select-title">
      <span>{{ product.productName }}</span>
      <img :src="src" :alt="product.productName">
    </h3>

    <h3 v-else class="preferred-select-title1">{{ product.productName }}
      <span style="color: gold; font-weight: bold">散标</span>
    </h3>

    <div class="preferred-select-number">
      <p><b>{{ product.rate }}</b>%</p>
      <span>历史年化收益率</span>
    </div>
    <div class="preferred-select-date">
      <div>
        <span>投资周期</span>
        <p><b>{{ product.cycle }}</b>个月</p>
      </div>
      <div>
        <span>剩余可投资金额</span>
        <p><b>{{ product.leftProductMoney }}</b>元</p>
      </div>
    </div>
    <p class="preferred-select-txt">
      {{ product.productDesc }}
    </p>
    <a href="javascript:;" @click="$router.push('/detail?id='+product.id)" class="preferred-select-btn">立即投资</a>
  </li>
</template>

<script>
export default {
  name: "ProductItem",
  props: ['product'],
  computed: {
    src() {
      if (this.product.cycle == 1) {
        return "/image/1-bg1.jpg";
      } else if (this.product.cycle == 3) {
        return "/image/1-bg2.jpg";
      } else if (this.product.cycle == 6) {
        return "/image/1-bg3.jpg";
      } else {
        return "/image/1-bg4.jpg";
      }
    }
  }
}
</script>

<style scoped>

</style>